<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车辆品牌分析</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            max-width: 1270px;
        }
        .chart-container {
            width: 100%;
            height: 450px;
            margin-bottom: 30px;
            border-radius: 8px;
            background: white;
            box-shadow: var(--shadow);
            padding: 15px;
        }
        .summary-card .card {
            border: none;
            border-radius: 10px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        .summary-card .card:hover {
            transform: translateY(-5px);
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: var(--shadow);
            margin-bottom: 25px;
            overflow: hidden;
        }
        .card-header {
            background-color: var(--dark-color);
            color: white;
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
        }
        .card-body {
            padding: 20px;
        }
        h2 {
            color: var(--dark-color);
            font-weight: 700;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .display-4 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }
        .text-muted {
            color: #6c757d !important;
            font-size: 1rem;
        }
        table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }
        th {
            background-color: var(--dark-color);
            color: white;
            position: sticky;
            top: 0;
        }
        tr:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }
        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        .topbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        @media (max-width: 768px) {
            .chart-container {
                height: 300px;
            }
            .display-4 {
                font-size: 2rem;
            }
        }
        .navbar {
            border-radius: 10px;
            background-color: #343a40;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            transition: all 0.3s ease-in-out;
        }
        .navbar:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .navbar-brand {
            font-weight: bold;
            font-size: 1.25rem;
            color: #ffffff;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }
        .navbar-brand:hover {
            color: #2980b9;
        }
        .navbar-nav .nav-item .nav-link {
            color: #ffffff;
            font-weight: 500;
            padding: 12px 8px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .navbar-nav .nav-item .nav-link:hover,
        .navbar-nav .nav-item .nav-link:focus {
            color: #ffffff;
            background-color: #2980b9;
            border-radius: 5px;
        }
        .navbar-nav .nav-item.active .nav-link {
            color: #fff;
            background-color: #2980b9;
            border-radius: 5px;
        }
        .navbar-nav.ms-auto .nav-link {
            color: #ffffff;
            font-weight: 500;
            padding: 12px 20px;
        }
        .navbar-nav.ms-auto .nav-link:hover {
            background-color: #2ecc71;
            color: #fff;
            border-radius: 5px;
        }
        @media (max-width: 768px) {
            .navbar-collapse {
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
<div th:insert="~{common/common::topbar}"></div>
<div class="container mt-4">
    <h2 class="mb-4 text-center">🚗 车辆品牌分布分析</h2>

    <!-- 概览卡片 -->
    <div class="row summary-card">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title"><i class="bi bi-car-front-fill"></i> 车辆总数</h5>
                    <p class="card-text display-4" th:text="${carcount}"></p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title"><i class="bi bi-graph-up"></i> 前5品牌覆盖率</h5>
                    <p class="card-text display-4">
<!--                   ${#aggregates.sum(brandcount.![count])} 将brandcount列表中的count字段求和     -->
                        <span th:text="${#aggregates.sum(brandcount.![count])}"></span>
                        <small class="text-muted">
<!--                            ${carcount != 0 ?
                                #numbers.formatDecimal(
                                    #aggregates.sum(brandcount.![count]) * 100.0 / carcount,
                                    1, 2
                                ) : '0'}      最外面三元表达式来判断车辆总数是否为0防止除0的情况，如果车辆数量为0页面显示数据为0
                               numbers.formatDecimal thymleaf的数的格式化工具，可以将后后小数位保留两位，通过#aggregates.sum(brandcount.![count]) * 100.0 / carcount计算出前五品牌数量占总数的百分比，也就是覆盖率-->
                            (占总数
                            <span th:text="${carcount != 0 ?
                                #numbers.formatDecimal(
                                    #aggregates.sum(brandcount.![count]) * 100.0 / carcount,
                                    1, 2
                                ) : '0'}"
                                  style="color: var(--secondary-color); font-weight: 600;">
                            </span>%)
                        </small>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 原车辆图表 -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-pie-chart"></i> 品牌占比分析</h5>
                </div>
                <div class="card-body">
                    <div id="pieChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-bar-chart"></i> 品牌数量对比</h5>
                </div>
                <div class="card-body">
                    <div id="barChart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增维修图表 -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-pie-chart"></i> 前五品牌维修占比</h5>
                </div>
                <div class="card-body">
                    <div id="repairPieChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-bar-chart"></i> 品牌维修次数对比</h5>
                </div>
                <div class="card-body">
                    <div id="repairBarChart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格（原有） -->
    <div class="card mt-4">
        <div class="card-header">
            <h5><i class="bi bi-table"></i> 详细数据</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>品牌</th>
                        <th>数量</th>
                        <th>占比</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="brand,iter : ${brandcount}">
                        <td th:text="${iter.index + 1}"></td>
                        <td th:text="${brand.brand}"></td>
                        <td th:text="${brand.count}"></td>
                        <td th:with="percent=${carcount != 0 ? brand.count * 100.0 / carcount : 0}">
                            <span class="badge bg-primary rounded-pill">
                                <span th:text="${#numbers.formatDecimal(percent, 1, 2)} + '%'"></span>
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
<!--    计算所有饼图中数据的百分比函数 count当前项的值，total总数，Math.round转换百分比且保留俩位小数-->
    function calcPercentage(count, total) {
        if (!total || total === 0) return 0;
        return Math.round((count / total) * 100 * 100) / 100;
    }
    //车辆品牌颜色映射函数  用于为每个品牌分配不同的颜色
    function getBrandColor(brand) {
        const colorMap = {
            '丰田': '#e74c3c',
            '本田': '#3498db',
            '大众': '#2ecc71',
            '日产': '#f39c12',
            '宝马': '#9b59b6',
            '奔驰': '#1abc9c',
            '奥迪': '#34495e',
            '现代': '#e67e22',
            '起亚': '#27ae60',
            '福特': '#2980b9'
        };
        //如果颜色映射中没有找到对应的颜色，就随机生成一个颜色 Math.random()*16777215将生成的浮点数扩大到16777215（对应16进制FFFFFF）
        // 然后将此范围toString转换为16进制，也代表了颜色的范围，此范围内随机生成颜色
        return colorMap[brand] || '#' + Math.floor(Math.random()*16777215).toString(16);
    }

    // 原车辆数据
//通过js数据来接收brandcount列表数据  并将其转换为js数组，然后通过.map方法遍历数组，将每个元素转换为一个新的对象，新对象包含品牌、数量和占比
    var brandData = [[${brandcount}]].map(item => ({
        brand: item.brand,
        count: item.count,
        percentage: calcPercentage(item.count, [[${carcount}]])
    }));

    // 新维修数据
    var repairData = [[${repaircount}]].map(item => ({
        brand: item.brand,
        count: item.count,
        percentage: calcPercentage(item.count, [[${totalRepairs}]])
    }));
//初始化图表，创建图表示例  分别为前五品牌占比分析、前五品牌数量对比、前五品牌维修占比、品牌维修次数对比
    var pieChart = echarts.init(document.getElementById('pieChart'));
    var barChart = echarts.init(document.getElementById('barChart'));
    var repairPieChart = echarts.init(document.getElementById('repairPieChart'));
    var repairBarChart = echarts.init(document.getElementById('repairBarChart'));

    // 原饼图
    pieChart.setOption({
        title: { text: '品牌占比分布', left: 'center' },
        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
        legend: { orient: 'vertical', left: 'left', data: brandData.map(i => i.brand) },
        series: [{
            name: '品牌分布', type: 'pie', radius: ['40%', '70%'],
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
            data: brandData.map(i => ({ value: i.count, name: i.brand, itemStyle: { color: getBrandColor(i.brand) } }))
        }]
    });

    // 原柱状图
    barChart.setOption({
        title: { text: '品牌数量对比', left: 'center' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        xAxis: { type: 'category', data: brandData.map(i => i.brand) },
        yAxis: { type: 'value', name: '数量' },
        series: [{ type: 'bar', data: brandData.map(i => ({ value: i.count, itemStyle: { color: getBrandColor(i.brand) } })) }]
    });

    // 新维修饼图
    repairPieChart.setOption({
        title: { text: '前五品牌维修占比', left: 'center' },
        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
        legend: { orient: 'vertical', left: 'left', data: repairData.map(i => i.brand) },
        series: [{
            name: '维修分布', type: 'pie', radius: ['40%', '70%'],
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
            data: repairData.map(i => ({ value: i.count, name: i.brand, itemStyle: { color: getBrandColor(i.brand) } }))
        }]
    });

    // 新维修柱状图
    repairBarChart.setOption({
        title: { text: '品牌维修次数对比', left: 'center' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        xAxis: { type: 'category', data: repairData.map(i => i.brand) },
        yAxis: { type: 'value', name: '维修次数' },
        series: [{ type: 'bar', data: repairData.map(i => ({ value: i.count, itemStyle: { color: getBrandColor(i.brand) } })) }]
    });

    window.addEventListener('resize', () => {
        pieChart.resize();
        barChart.resize();
        repairPieChart.resize();
        repairBarChart.resize();
    });
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</body>
</html>
